<template>
    <div>我是面包屑</div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from 'vue-property-decorator'
    import {RouteRecord} from 'vue-router'

    @Component
    export default class Breadcrumb extends Vue {
        @Watch('$route')
        private onRouteChange() {
            console.log("面包屑 监听路由变化....")
            let matched = this.$route.matched.filter((item) => item.name)
            const first = matched[0]
            if (first && first.name !== 'dashboard') {
                matched = [{path: '/dashboard', meta: {title: 'Dashboard'}} as RouteRecord].concat(matched)
            }
            let breadcrumbs = matched.filter((item) => {
                return item.meta && item.meta.title && item.meta.breadcrumb !== false
            })
        }


    }
</script>

<style lang="scss" scoped>
    .app-breadcrumb.el-breadcrumb {
        display: inline-block;
        font-size: 14px;
        line-height: 50px;
        margin-left: 10px;

        .no-redirect {
            color: #97a8be;
            cursor: text;
        }
    }
</style>
